import { IMapSource } from './mapTypes';

//天地图的token
const tiandituToken = 'd12deb9576426df9aff82075b754790a';
/*
 * 天地图提供了多种背景地图和标注供选择，
 * 只要从http://lbs.tianditu.gov.cn/server/MapService.html找到对应的url即可
 * 这里使用了了矢量地图和注记
 * */
//矢量底图
const vecwUrl =
  'https://t0.tianditu.gov.cn/vec_w/wmts?' +
  'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +
  'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' +
  tiandituToken;
//矢量注记
const cvawUrl =
  'https://t3.tianditu.gov.cn/cva_w/wmts?' +
  'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +
  'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' +
  tiandituToken;
const tileSize = 256;

function addRasterTileLayer(
  map: mapboxgl.Map,
  url: string,
  sourceId: string,
  layerId: string,
) {
  map.addSource(sourceId, {
    type: 'raster',
    tiles: [url],
    tileSize,
  });
  map.addLayer({
    id: layerId,
    type: 'raster',
    source: sourceId,
  });
}

export const TiandituConfig: IMapSource = {
  style: {
    version: 8,
    sources: {},
    layers: [],
    glyphs: 'fonts/{fontstack}/{range}.pbf',
  },
  onLoad(map: mapboxgl.Map) {
    addRasterTileLayer(map, vecwUrl, 'vecw', 'vecw');
    addRasterTileLayer(map, cvawUrl, 'cvaw', 'cvaw');
  },
};

export const GetTiandituConfig = () => {
  return TiandituConfig;
};
